{% extends 'web/layout/basic.html' %}
{% load static %}
{% block title %}用户注册{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/css/account.css' %}">
    <style>
    .error-msg{
        color: red;
        position: absolute;
        font-size: 10px;
    }
    </style>

{% endblock %}


{% block content %}
    <div class="account">
    <div>
        <center>
        <h3 >用户注册</h3>
        </center>
    </div>
        <form id="form" method="post" novalidate>
            {% csrf_token %}
            {% for field in form %}
              {% if field.name == 'code' %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <div class="row">
                        <div class="col-xs-7">
                            {{  field }}
                            <span class="error-msg"></span>
                        </div>
                        <div class="col-xs-5">
                            <input type="button" id="smsBtn" class="btn btn-default" value="点击获取验证码">
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    <span class="error-msg"></span>
                </div>
            {% endif %}
        {% endfor %}

        <div class="row">
            <div class="col-xs-3"></div>
            <input type="button"  class="btn btn-primary" value="注册" >

        </div>


        </form>

    </div>

{% block js %}
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.cn/npm/@bootcss/v3.bootcss.com@1.0.52/dist/js/bootstrap.min.js"></script>

    <script>

    //页面框架加载完后自动执行函数
    $(function () {
        bindClickBtnSms();

    });

    function bindClickBtnSms() {
         $('#smsBtn').click(function () {
            //获取用户输入的手机号

             //点击后清除错误信息
             $('.error-msg').empty()

           let mobilePhone =  $('#id_mobile_phone').val();
           //发送ajax请求
             $.ajax({
                 url:"/web/send/sms/",//等价于：
                 type:"GET",
                 data:{mobile_phone: mobilePhone, tpl: "register"},
                 dataType: "JSON",//将服务器返回的数据反序列化为字典
                 success:function (res) {
                   //let res_dict = JSON.parse(res)
                     //执行成功，自动执行的函数，res为后端返回的值
                    // console.log(res_dict)
                     if(res.status){
                         console.log("发送验证码成功！进入倒计时")

                         sendSmsRemind();

                     }else{
                         console.log(res)
                     }
                     $.each(res.error, function (key, value) {
                         $("#id_"+key).next().text(value[0])
                     })

                 }

             })
         })
    }

    function sendSmsRemind() {
        {#let $smsBtn = $('smsBtn');#}
        $('smsBtn').attr('disable', true);
        let time = 60;
        let remind = setInterval(function () {
            $('smsBtn').val(time + '秒后重发');
            time = time - 1;
            if(time < 1){
                clearInterval(remind);
               $('smsBtn').val('点击获取验证码').attr('disable', false);

            }

        },1000)


    }
    </script>

{% endblock %}

{% endblock %}




